<template>
  <div id="message" v-scroll-bottom="sessions">
    <ul v-if="currentSession">
      <li v-for="entry in sessions[user.username+'#'+currentSession.username]">
        <p class="time">
          <span>{{ entry.date | time }}</span>
        </p>
        <div class="main" :class="{self:entry.self}">
          <img class="avatar" :src="entry.self ? user.userFace :currentSession.userFace" alt="">
          <p class="text">{{ entry.content }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: 'message',
    data() {
      return {
        user: JSON.parse(window.sessionStorage.getItem("user"))
      }
    },
    computed: mapState([
      'sessions',
      'currentSession'
    ]),
    filters: {
      time(date) {
        if (date) {
          date = new Date(date);
        }
        return `${date.getHours()}:${date.getMinutes()}`;
      }
    },
    directives: {/*这个是vue的自定义指令,官方文档有详细说明*/
      // 发送消息后滚动到底部,这里无法使用原作者的方法，也未找到合理的方法解决，暂用setTimeout的方法模拟
      'scroll-bottom'(el) {
        //console.log(el.scrollTop);
        setTimeout(function () {
          el.scrollTop += 9999;
        }, 1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  #message {
    padding: 15px;
    max-height: 68%;
    overflow-y: scroll;

    ul {
      list-style-type: none;
      padding-left: 0;

      li {
        margin-bottom: 15px;
      }
    }

    .time {
      text-align: center;
      margin: 7px 0;

      > span {
        display: inline-block;
        padding: 0 18px;
        font-size: 12px;
        color: #FFF;
        background-color: #dcdcdc;
        border-radius: 2px;
      }
    }

    .main {
      .avatar {
        float: left;
        margin: 0 10px 0 0;
        border-radius: 3px;
        width: 30px;
        height: 30px;

      }

      .text {
        display: inline-block;
        padding: 0 10px;
        max-width: 80%;
        background-color: #fafafa;
        border-radius: 4px;
        line-height: 30px;
      }
    }

    .self {
      text-align: right;

      .avatar {
        float: right;
        margin: 0 0 0 10px;
        border-radius: 3px;
        width: 30px;
        height: 30px;
      }

      .text {
        display: inline-block;
        padding: 0 10px;
        max-width: 80%;
        background-color: #b2e281;
        border-radius: 4px;
        line-height: 30px;
      }
    }
  }
</style>
